<template>
  <div id="LabInstrSetup">
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <el-form ref="labDataform" :rules="formRules" :model="form" class="form-input-m baseForm" label-width="120px" inline-message inline>
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="窗口编号" prop="instrId">
                  <el-input v-model="form.winCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="instrCode">
                  <el-input v-model="form.winName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="顺序" prop="instrCalled">
                  <el-input v-model="form.seq"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="采样类型" prop="callType">
                  <el-select v-model="form.sampleTypeCode" filterable placeholder="请选择采样类型" style="width: 200px">
                    <el-option v-for="callType in callTypeList" :key="callType.sampleTypeCode" :label="callType.sampleTypeName" :value="callType.sampleTypeCode"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="状态" prop="isUse">
                  <el-select v-model="form.isEnable" filterable placeholder="请选择状态" style="width: 200px">
                    <el-option v-for="state in stateList" :key="state.name" :label="state.name" :value="state.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <div class="btnBox">
                <el-button type="primary" @click="handleAdd()">新建</el-button>
                <el-button type="primary" v-loading="showLoading" @click="save()">保存</el-button>
                <el-button type="default" @click="handleAdd()">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, PropType, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import { Splitpanes, Pane } from 'splitpanes';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
// 基本信息form表单
let form = reactive({
  id: '',
  winCode: '',
  winName: '',
  sampleTypeCode: '',
  seq: '',
  isEnable: 1
});
let callTypeList:any = reactive([])
let stateList:any = reactive([
  {
    value: 0,
    name: '关闭'
  }, {
    value: 1,
    name: '启用'
  }, {
    value: 2,
    name: '暂停'
  }
])
// form表单校验规则
let formRules: any = {
  winCode: [
    {
      required: true,
      message: '请输入编号',
      trigger: 'blur'
    }
  ],
  winName: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    }
  ]
};

let labDataform = ref(null); //form表单标记ref

let showLoading = ref(false); //保存按钮
let FeeItemSearchValue = ref('');

// 页面加载时
onMounted(() => {
  getSampleTypeList(); //获取检验仪器表格数据
});

// 方法定义区 =============
defineExpose({ initPage, clearFormData });


function getSampleTypeList() {

  callTypeList.length = 0; //放入数据前清空数据
  const url = '/callNum/sampleType/findSampleTypeList';
  proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: {
          seachValue: ''
        }
      })
      .then((res: any) => {
        callTypeList.push(...res.data);
      })
      .catch((err: any) => {
         VxeMessage('获取获取采样类型列表失败',VxeNotifyType.error)
      });
}

// 左侧表格点击当前行传过来的数据
function initPage(row: any) {
  const el: any = proxy.$refs['labDataform'];
  el.clearValidate();
  if (row !== null) {
    for (let prop in row) {
      form[prop] = row[prop];
    }
  }
}

//清空数据
function clearFormData() {
  for (let key in form) {
    form[key] = '';
  }
  const el: any = proxy.$refs['labDataform'];
  el.resetFields(); //重置该表单项，将其值重置为初始值，并移除校验结果
}

// 新增按钮 + 重置按钮
function handleAdd() {
  clearFormData();
}

// 保存按钮
function save() {
  const el: any = proxy.$refs['labDataform'];
  if (!el) return;
  el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    showLoading.value = true;
    proxy.$http
        .post('/callNum/window/addOrEditWindow', form)
        .then((res: any) => {
          if (res.status.code === 1) {
            VxeMessage('保存成功', VxeNotifyType.success);
            proxy.$emit('getTableData'); //触发父组件重新获取表格数据
          } else {
            proxy.$emit('getTableData'); //触发父组件重新获取表格数据
            return;
          }
        })
        .catch((err: any) => {
          VxeMessage('保存失败', VxeNotifyType.error);
        });
    clearFormData(); //清空数据
    showLoading.value = false;
  });
}
let employeeSelectRef: any = ref(null);

let visibleOutReporter: any = ref(false);

</script>

<style lang="scss" scoped>
#LabInstrSetup {
  width: 100%;
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);


    .mytable-scrollbar{
      height: calc(100%);
    }

    .splitpanes {
      background-color: $base-white;
      .el-tabs {
        height: 100%;

        :deep(.el-tabs__content) {
          height: calc(100% - 40px);
          padding: 0 10px;

          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
    .leftTable {
      height: calc(100% - 30px);
    }

    .msgDiv {
      margin-left: 5px;
      color: rgb(180, 28, 28);
    }
    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }
  }
}
</style>
